<template>
   <div id="register">
		<div class="regist_two">
			<p class="J_secTabs">
				<a class="selected" href="javascript:;">个人注册</a>
				<a href="javascript:;">公司注册</a>
			</p>
			<div class="ctn">
				<div class="vali_list">
					<el-form label-width="110px">
						<el-form-item label="手机号码：">
							<phoneInput inputType="number" placeholder="请输入手机号码" type="tel" v-model="register.detail.phone"></phoneInput>
						</el-form-item>
						<el-form-item label="短信验证码：">
							<el-col :span="13">
								<phoneInput inputType="number" placeholder="请输入短信验证码" type="tel_code" v-model="register.detail.tel_code"></phoneInput>
							</el-col>
							<el-col :span="1">&nbsp;</el-col>
							<el-col :span="10"><el-button type="primary">获取验证码</el-button></el-col>
						</el-form-item>
						<el-form-item label="验证码：">
							<el-col :span="24"><slideCheck></slideCheck></el-col>
						</el-form-item>
						<el-form-item label="设置密码：">
							<phoneInput inputType="password" placeholder="6-20位之间" type="password" v-model="register.detail.password"></phoneInput>
						</el-form-item>
						<el-form-item label="确认密码：">
							<phoneInput inputType="password" placeholder="请再次输入密码" type="passwordT" v-model="register.detail.passwordT"></phoneInput>
						</el-form-item>
						<el-form-item label="邀请码(选填)：">
							<el-input v-model="register.detail.shareCode" placeholder="请输入邀请码"></el-input>
						</el-form-item>
						<el-form-item label="">
							<el-checkbox v-model="register.detail.checked" checked></el-checkbox>&nbsp;注册即同意<a href="javscript:;">《投资平台用户服务协议》</a>
						</el-form-item>
						<el-form-item label="">
							<el-button @click="uploadRegister">立即注册</el-button>
						</el-form-item>
					</el-form>
					<p class="heaven">已有账号？<router-link to="/form/login">立即登录！</router-link></p>
				</div>
				<div class="vali_list hide">
					<el-form label-width="110px">
						<el-form-item label="联系人：">
							<el-input placeholder="请输入手机号"></el-input>
						</el-form-item>
						<el-form-item label="短信验证码：">
							<el-col :span="13"><el-input placeholder="请输入短信验证码"></el-input></el-col>
							<el-col :span="1">&nbsp;</el-col>
							<el-col :span="10"><el-button type="primary">获取验证码</el-button></el-col>
						</el-form-item>
						<el-form-item label="验证码：">
							<el-col :span="13"><el-input placeholder="请输入验证码"></el-input></el-col>
							<el-col :span="1">&nbsp;</el-col>
							<el-col :span="10" class="yzimg"><img src="../../../public/images/bank1.png" /></el-col>
						</el-form-item>
						<el-form-item label="设置密码：">
							<el-input type="password" placeholder="6-20位数字和字母，以字母开头"></el-input>
						</el-form-item>
						<el-form-item label="确认密码：">
							<el-input type="password" placeholder="请再次输入密码"></el-input>
						</el-form-item>
						<el-form-item label="邀请码(选填)：">
							<el-input placeholder="请输入邀请码"></el-input>
						</el-form-item>
						<el-form-item label="">
							<el-checkbox checked></el-checkbox>&nbsp;注册即同意<a href="javascript:;">《投资平台用户服务协议》</a>
						</el-form-item>
						<el-form-item label="">
							<el-button>立即注册</el-button>
						</el-form-item>
					</el-form>
					<p class="heaven">已有账号？<router-link to="/form/login">立即登录！</router-link></p>
				</div>
			</div>
		</div>
   </div>
</template>

<script>
	import * as form from 'src/components/main/formInput/main';
	import qs from 'qs';
    export default {
        name:'register',

		data(){
            return{
                input:'',
				register:{
                    detail:{
                        phone:'',
						tel_code:'',
						password:'',
						passwordT:'',
						shareCode:'',
						checked:true
					}
				},
                number:1
			}
		},

		computed:{
		    detailBoo() {
		        return this.$store.state.Check.registerBoo;
			},

            registerDetail() {
                return this.$store.state.Check.registerDetail;
            }
		},

		components:{
          	phoneInput:form.PhoneInput,
			test:form.test,
            slideCheck:form.slideCheck,
		},

		methods:{
		    uploadRegister() {
		        console.log(this.detailBoo);
		        const register = this.detailBoo;
                const registerDetail = this.registerDetail;
		        const _this = this;
		        for (let key in register) {
		            if (!register[key]) {
                        this.$message.error('请检查填写的内容是否正确');
                        return;
					}
				}
				if (this.register.detail.password != this.register.detail.passwordT) {
                    this.$message.error('两次输入的密码不一致');
                    return;
				}
				if (!this.register.detail.checked){
                    this.$message.error('您可能需要同意我们的协议');
                    return;
				}
				console.log("registerDetail.phone：=="+registerDetail.phone);
                this.axios.post(_this.$store.state.Check.url + '/register',qs.stringify({
                        username:registerDetail.phone,
                        password:registerDetail.password,
                        shareCode:_this.register.shareCode,
                        phone:registerDetail.phone
                })).then(resultData => {
                    const data = resultData.data;
                    if (data.status == 200) {
                        this.$notify({
                            title: '成功',
                            message: '您已成功注册',
                            type: 'success'
                        });
                        _this.$router.push('/form/login');
                    } else {
                        this.$notify({
                            title: '警告',
                            message: data.msg,
                            type: 'warning'
                        });
                    }
                }).catch(err => {
                    this.$notify({
                        title: '警告',
                        message: '网络出错了~再试试吧~',
                        type: 'warning'
                    });
                });
				this.axios.get(_this.$store.state.Check.url + '/check_sms',{
                    params: {
                        code:1314
                    }
                }).then(res => {
                    const data = res.data;
                    if (data.status == 200) {
                        return true;
                    } else {
                        return false;
                    }
                });
			}
		}
    }
</script>

<style lang="less" rel="stylesheet/less" type="text/css">
	@import '../../../public/css/variable.less';
	.regist{ height: 980px; }
	.regist_wrap{
	    width: 450px;
	    margin: 60px auto 0;
	}
	.yzimg{
		height: 36px;
		img{
			width: 100%;
			height: 36px;
		}
	}
    .regist_two{
        border: 1px solid @cw;
        .bdr(5px);
        .J_secTabs{
            .cf();
            text-align: center;
            a{
                float: left;
                display: inline-block;
                width: 50%;
                line-height: 50px;
                .fonts(18px);
                .bdr(5px);
                color: @cw;
                &.selected{
                    background: @cw;
                    color: @cgolden;
                    .bdr(0);
                }
            }
        }
    }

</style>